<template>
  <div class="create">
    <div class="create-main">
      <div class="create-main-screen" :style="style">
        <div class="screen-container"></div>
      </div>
    </div>
    <div class="create-tool">
     
      <el-tabs v-model="activeName">
        <el-tab-pane label="页面信息" name="pageInfo">
          <page-info></page-info>
        </el-tab-pane>
        <el-tab-pane label="组件编排" name="component">
          <component-layout></component-layout>
        </el-tab-pane>
      </el-tabs>
       <div class="create-tool-top">
        <el-button
          class="success-button"
          type="success"
          size="mini"
          @click="submit"
          >保存</el-button
        >
        <el-button class="cancel-button" size="mini" @click="cancel">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>
  <script>
import pageInfo from "./page_info.vue";
import componentLayout from "./component_layout.vue";
import { EventBus } from "@/untils/event";

export default {
  name: "ContentList",
  components: {
    pageInfo,
    componentLayout,
  },
  mounted() {
    EventBus.$on("change_screen_type", (val) => {
      if(val === 'across') {
        this.style.width = "80%";
      }else {
        this.style.width = "30%";
      }
    });
  },
  data() {
    return {
      style: {
        width: "80%",
        height: "80%",
      },
      activeName: "pageInfo",
    };
  },
  methods: {
    cancel() {
      this.$router.push("list");
    },
    submit(){
      console.log('submit')
    }
  },
};
</script>
  <style lang="less" scoped>
.create {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  .create-main {
    position: relative;
    width: 80%;
    height: 100%;
    color: red;
    .create-main-screen {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // background-color: #fff;
      overflow: auto;
      .screen-container{
        background: #fff;
        width: 1600px;
        height: 900px;
      }
    }
  }
  .create-tool {
    position: absolute;
    right: 0px;
    width: 19%;
    height: 100%;
    background-color: #fff;
    .create-tool-top {
      display: flex;
      flex-direction: row-reverse;
      width: 100%;
      height: 48px;
      padding: 10px 10px;
      border-bottom: 1px solid #ccc;
      .success-button {
        margin: 0px 8px;
      }
      d .cancel-button {
        margin: 0px 8px;
      }
    }
  }
}
</style>
  